var graphic_height = 390;
var graphic_width = 1000;
var num_points = 1000;

var min_x;
var max_x;
var start_x;
var temp_start_x;
var start_point;
var end_point;

var mouse_x = -1;

var points = [];

var graphic_object;

function Point(x_coord, y_coord) {
	this._x = x_coord;
	this._y = y_coord;
}

function AddPoint(x_coord, y_coord) {
	points[points.length] = new Point(x_coord, y_coord);
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function GeneratePoints() {
	for (var i = 0; i < num_points; i++) {
		AddPoint(getRandomInt(100*i, 100*i + 100), getRandomInt(1000, 9999));
	}
	min_x = points[0].x;
	max_x = points[num_points - 1].x;
}

function FindStartPoint() {
	for (var i = 0; i < num_points; i++) {
		if (points[i]._x > start_x) return i;
	}
	return num_points - 1;
}

function FindEndPoint() {
	for (var i = start_point; i < num_points; i++) {
		if (points[i]._x > start_x + graphic_width) return i;
	}
	return num_points - 1;
}

function FirstBuildGraphic() {
	var d_attribute = "M";
	var shape;
	
	d_attribute += points[start_point]._x - start_x + "," + 
		Math.floor((points[start_point]._y - 1000)*graphic_height/8999);
		
	for (var i = start_point + 1; i <= end_point; i++) {
		d_attribute += " L" + (points[i]._x - start_x) + "," +
			Math.floor((points[i]._y - 1000)*graphic_height/8999);
		shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
		shape.setAttribute("name", "circles");
		shape.setAttribute("cx", points[i]._x - start_x);
		shape.setAttribute("cy", Math.floor((points[i]._y - 1000)*graphic_height/8999));
		shape.setAttribute("r",  5);
		shape.setAttribute("fill", "blue");
		document.getElementById("gr_content").appendChild(shape);
	} 
	graphic_object.setAttribute("d", d_attribute);
	//if (start_point == 0) return;
	//start_point--;
	//window.setTimeout("BuildGraphic()", 10);
}

function BuildGraphic() {
	var d_attribute = "M";
	var circles = document.getElementsByName("circles");
	//alert(circles.length);
	
	d_attribute += points[start_point]._x - start_x + "," + 
		Math.floor((points[start_point]._y - 1000)*graphic_height/8999);
		
	for (var i = start_point; i <= end_point; i++) {
		d_attribute += " L" + (points[i]._x - start_x) + "," +
			Math.floor((points[i]._y - 1000)*graphic_height/8999);
		if (i - start_point < circles.length) {
			circles[i - start_point].setAttribute("cx", points[i]._x - start_x);
			circles[i - start_point].setAttribute("cy", Math.floor((points[i]._y - 1000)*graphic_height/8999));
		}
	}
	graphic_object.setAttribute("d", d_attribute);
	//if (start_point == 0) return;
	//start_point--;
	//window.setTimeout("BuildGraphic()", 10);
}

function getMouseXY(e) {
	var temp_x;
	if (mouse_x == -1) mouse_x = e.pageX;
	temp_x = e.pageX;
	start_x = temp_start_x + mouse_x - temp_x;
	start_point = FindStartPoint();
	if (start_point != 0) start_point--;
	end_point = FindEndPoint();
	if (end_point != num_points - 1) end_point++;
	BuildGraphic();
}

function StopRolling() {
	document.onmousemove = "null";
	document.onmouseup = "null";
}

function GRoll() {
	mouse_x = -1;
	temp_start_x = start_x;
	document.onmousemove = getMouseXY;
	document.onmouseup = StopRolling;
}

function Init() {
	graphic_object = document.getElementById("graphic");
	GeneratePoints();
	start_x = 0;
	start_point = FindStartPoint();
	if (start_point != 0) start_point--;
	end_point = FindEndPoint();
	if (end_point != num_points - 1) end_point++;
	FirstBuildGraphic();
}